<template>
  <div class="sickbedList">
    <div class="left-menu">
      <!-- <div class="left-head">
        <img src="../assets/refresh.png" @click="getDepartmentList" />
        <span>刷新</span>
      </div>-->
      <el-menu
        :default-active="activeIndex"
        class="el-menu-vertical-demo"
        v-for="item in menuList"
        :key="item.departmrntState"
      >
        <el-menu-item
          :index="item.departmentId.toString()"
          :disabled="item.state"
          @click="menuClick(item.departmentId.toString())"
        >
          <span slot="title">{{ item.departmentName }}</span>
        </el-menu-item>
      </el-menu>
    </div>
    <el-row style="width: 10px"></el-row>
    <div class="right">
      <el-row style="height: 10px;width: 100%"></el-row>
      <div class="search-row">
        <el-input v-model="sickBedId" placeholder="输出病床id"></el-input>
        <el-row style="width: 10px"></el-row>
        <el-input v-model="sickBedName" placeholder="输出病床名称"></el-input>
        <el-row style="width: 10px"></el-row>
        <el-select v-model="sickbedState" placeholder="病床状态">
          <el-option
            v-for="item in stateOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-row style="width: 10px"></el-row>
        <el-button icon="el-icon-search" circle></el-button>
      </div>
      <div class="btn-row">
        <el-button type="primary" @click="addSickBed">新增病床</el-button>
        <el-button type="primary">启用病床</el-button>
        <el-button type="warning">停用病床</el-button>
        <el-button type="danger">删除病床</el-button>
      </div>
      <div class="recordList">
        <el-table :data="sickbedData" style="width: 100%">
          <el-table-column type="selection" width="50"></el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-link type="success" @click="editOnly(scope.row)"
                >编辑</el-link
              >
              <el-link type="danger" @click="delOnly(scope.row)">删除</el-link>
              <!-- <span @click="del(scope.row)">删除</span> -->
            </template>
          </el-table-column>
          <el-table-column label="序号" width="200">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
              <!-- <span>{{ scope.$index + 1 + (pageIndex - 1) * pageSize }}</span> -->
            </template>
          </el-table-column>
          <el-table-column
            prop="sickBedId"
            label="病床id"
            width="200"
          ></el-table-column>
          <el-table-column
            prop="sickBedName"
            label="病床名称"
          ></el-table-column>
          <el-table-column prop="desc" label="描述"></el-table-column>
          <el-table-column label="状态">
            <template slot-scope="scope">
              <span>{{ scope.row.sickBedState == 1 ? "启用" : "停用" }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page">
        <el-pagination
          align="right"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageIndex"
          :page-sizes="[10, 5]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next"
          :total="totalNumber"
          style="margin-top: 58px; margin-bottom: 40px"
        ></el-pagination>
      </div>
      <el-dialog
        :title="diaTitle"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="病床名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="病床描述">
            <el-input type="textarea" v-model="form.desc"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "sickbedList",
  props: {
    adminName: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      sickBedId: "",
      sickBedName: "",
      sickBedState: "",
      activeIndex: "",
      stateOptions: [
        {
          label: "启用中",
          value: 1
        },
        {
          label: "停用中",
          value: 0
        }
      ],
      menuList: [],
      sickbedData: [
        {
          sickBedId: 1,
          sickBedName: "病床sb",
          desc: "啦啦啦啦啦啦啦啦啦",
          sickBedState: 1
        },
        {
          sickBedId: 2,
          sickBedName: "病2222",
          desc: "kkkkkkkkkkkkkkkkk",
          sickBedState: 0
        }
      ],
      form: {},
      sickbedId: "",
      sickbedName: "",
      sickbedState: "",
      dialogVisible: false,
      diaTitle: "",
      pageIndex: 1,
      pageSize: 10,
      totalNumber: 100
    };
  },
  created() {
    this.getDepartmentList();
  },
  methods: {
    getDepartmentList() {
      // console.log(111);
      this.$axios.get("/api/CjwDepartment/GetDepartmentList").then(res => {
        this.menuList = res.data;
      });
      console.log(this.menuList);
    },

    menuClick(id) {
      this.activeIndex = id;
      // let name = "chenjiawei";
      console.log(id);
      // this.$emit("admin", name);
      // let time =
    },

    addSickBed() {
      this.diaTitle = "新增病床";
      this.dialogVisible = true;
    },

    // editSickBed() {
    //   this.diaTitle = "编辑病床";
    //   this.dialogVisible = true;
    // }

    editOnly(item) {
      this.diaTitle = "编辑病床";
      this.dialogVisible = true;
      console.log(item);
    },

    delOnly(item) {
      console.log(item);
      console.log(this.adminName);
    },

    handleSizeChange() {},

    handleCurrentChange() {}
  }
};
</script>

<style scoped>
.sickbedList {
  display: flex;
  height: 100%;
}

.left-menu {
  width: 250px;
}

.left-menu .left-head {
  display: flex;
  align-items: center;
}

.right {
  width: 100%;
}

.left-menu .left-head img {
  width: 32px;
  height: 32px;
}

.search-row {
  display: flex;
  padding-bottom: 10px;
}

.search-row .el-input {
  width: 200px;
}

.recordList {
  width: 100%;
  height: 70%;
}

.page {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
}
</style>
